<template>
	<view class="pages"  @click.stop="close">
		<!-- @touchmove.stop.prevent="moveHandle" -->
		<view class="select-wrap">
			<view class="select">
				<view style="width: 284rpx; height: 21rpx;" class="triangle">
					<image src="/static/img/triangle.png"></image>
				</view>
				<view class="second-select">
					<view class="second-select-item" :class="selectIndex == -1? 'selected':''" >
						<text @click="select(0,-1)">全部</text>
					</view>
					<view class="second-select-item" 
					v-for="(item,index) in secondSelectList" 
					:key="index" 
					@click="select(item.id,index)"
					:class="selectIndex == index? 'selected':''"
					>
						<text @click="select(item.id,index)">{{item.title}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: ["secondSelectList", "selectIndex"],
		data() {
			return {
				
			}
		},
		onLoad(){
		},
		methods: {
			select(id,index) {
				// #ifdef APP-PLUS|| MP-WEIXIN
				this.$parent.sonid = id
				// #endif
				// #ifndef APP-PLUS|| MP-WEIXIN
				this.$parent.$parent.sonid = id
				// #endif
				this.$emit('fenlei',id,index);
				
			},
			moveHandle() {
			  return;
			},
			close(){
				this.$emit('child-event','a')
			}
		}
	}
</script>

<style scoped>
	.pages {
		width: 100%;
		height: 100vh;
		position: fixed;
		z-index: 100;
	}
	.select-wrap {
		position: fixed;
		bottom: 0;
		width: 750rpx;
		height: calc(100vh - 360rpx - var(--status-bar-height) - 90rpx );
		background: rgba(0,0,0,0.5);
	}
	.select {
		position: absolute;
		top: 10rpx;
		right: 0;
		background: #fff;
		width: 284rpx;
		height: auto;
	}
	.second-select {
		width: 284rpx;
		max-height:600rpx;
		height: auto;
		
		overflow-y: scroll;
		
		
		/* padding:8px 0px; */
	}
	.second-select-item {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 284rpx;
		height: 88rpx;
	}
	.second-select-item text {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
	}
	.selected {
		background: #FEB147;
		color: #fff;
	}
	.triangle {
		position: relative;
		width: 284rpx;
		height: 21rpx;
		background: rgba(0,0,0,0.5);
	}
	.triangle image {
		position: absolute;
		top: 1rpx;
		left: 160rpx;
		width: 50rpx;
		height: 21rpx;
	}
</style>
